<template>
    <div>
        <div class="select-type">
            <el-text class="mx-1">选择图文类别：</el-text>
            <el-select v-model="typeId" placeholder="选择图文类别" @change="handleChangeType">
                <el-option
                    v-for="item in types"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                />
            </el-select>
        </div>
        <List @refresh="refresh"></List>
    </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useContentStore } from "@/stores/content";
import { listAllType } from "@/services/type";
import List from "./modules/List.vue";
// import { getContents } from "@/services/content";
// import { getSysDictsByType } from "@/services/sysDict";
const { fetchContentsByTypeId } = useContentStore();
const typeId = ref();
const types = ref([]);
onMounted(async () => {
    // types.value = await getSysDictsByType(1);
    // refresh();
    types.value = (await listAllType()).data;
    typeId.value = types.value[0].id;
    await fetchContentsByTypeId({},{typeId:types.value[0].id});
});
function refresh() {

}
async function handleChangeType() {
    await fetchContentsByTypeId({},{typeId:typeId.value});
}
</script>
<style scoped>
.select-type{
    margin-bottom: 20px;
}
</style>
